import React, { FC, ReactNode, useState } from 'react';
import './index.less';
import { Button, Card, Col, Row } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import SiteBaseSettingForm from '@/pages/biz/SiteSetting/components/SiteBaseSettingForm';
import QrCodeSettingForm from '@/pages/biz/SiteSetting/components/QrCodeSettingForm';
import JournalSettingForm from '@/pages/biz/SiteSetting/components/JournalSettingForm';
import AboutSettingForm from '@/pages/biz/SiteSetting/components/AboutSettingForm';
import LegalLiabilitySettingForm from '@/pages/biz/SiteSetting/components/LegalLiabilitySettingForm';
import PrivacySettingForm from '@/pages/biz/SiteSetting/components/PrivacySettingForm';
import { KfModal } from 'kf-web-library';
import SiteNumberSettingForm from "@/pages/biz/SiteSetting/components/SiteNumberSettingForm";

interface SiteSettingProps {}

const settingConfig = [
  {
    title: <div>基础配置</div>,
    content: <div>设置网站页脚中的联系信息、版权等信息。</div>,
    formComp: <SiteBaseSettingForm />,
  },
  {
    title: <div>备案/审核号</div>,
    content: <div> 设置网站页脚中备案/审核信息。</div>,
    formComp: <SiteNumberSettingForm />,
  },
  {
    title: <div>访问二维码</div>,
    content: <div> 设置网站菜单"掌上华西"和网站页脚中的二维码信息。</div>,
    formComp: <QrCodeSettingForm />,
  },
  {
    title: <div>期刊配置</div>,
    content: <div>设置网站"期刊页面"相关公共配置参数。</div>,
    formComp: <JournalSettingForm />,
  },
  {
    title: <div>关于我们</div>,
    content: <div>设置网站"关于我们"页面的标题、内容和统计数据。</div>,
    formComp: <AboutSettingForm />,
  },
  {
    title: <div>法律责任/期刊社协议</div>,
    content: <div>设置网站"法律责任/期刊社协议"页面内容，用户注册时必须勾选此协议。</div>,
    formComp: <LegalLiabilitySettingForm />,
  },
  {
    title: <div>隐私政策/协议</div>,
    content: <div>设置网站"隐私政策/协议"页面内容，用户注册时必须勾选此协议。</div>,
    formComp: <PrivacySettingForm />,
  },
];

const SiteSetting: FC<SiteSettingProps> = (props) => {
  const [settingModalOpenComp, setSettingModalOpenComp] = useState<{ title: ReactNode; formComp: ReactNode } | undefined>(undefined);

  return (
    <div className={'site-setting-container'}>
      <Row gutter={[16, 16]}>
        {settingConfig.map((config, index) => {
          const { title, content, formComp } = config;
          return (
            <Col span={12} key={index}>
              <Card
                title={title}
                variant={'outlined'}
                extra={
                  <div>
                    <Button type={'primary'} size={'small'} icon={<SettingOutlined />} onClick={() => setSettingModalOpenComp({ title, formComp })} />
                  </div>
                }
              >
                {content}
              </Card>
            </Col>
          );
        })}
      </Row>

      {!!settingModalOpenComp && (
        <KfModal
          title={settingModalOpenComp.title}
          width={900}
          bodyStyle={{ padding: '0 24px' }}
          open={true}
          onCancel={() => setSettingModalOpenComp(undefined)}
          onSubmitted={() => {
            return false;
          }}
        >
          <div>{settingModalOpenComp.formComp}</div>
        </KfModal>
      )}
    </div>
  );
};

export default SiteSetting;
